<template>
  <view class="page-container">
    <view v-if="!isLogin" class="no_login_wrap">
      <image src="../../../static/img/user/no_login.png" mode="aspectFill"></image>
      <h4>需要登录才可以使用该功能哦~</h4>
      <button @tap="jumpLogin">立即登录</button>
    </view>
    <view v-else class="logined_wrap">
      <view class="cell-column">
        <input class="uni-input" type="number" :class="inputStyle" maxlength="5" v-model="price" placeholder="价格"
          placeholder-class="input-placeholder" />
        <text class="suffix">元/次</text>
      </view>

      <view class="tips">
        <view class="h4">温馨提示：</view>
        <view class="tip-ul">
          <view class="li">1、该页面为统一咨询费，修改后为所有患者执行；</view>
          <view class="li">2、修改成功后，患者将从下一次咨询进行生效；</view>
          <view class="li">3、咨询推广期暂不收取平台服务费；</view>
        </view>
        <view class="remark">注：如需单独设置价格，请至聊天界面更改。 </view>
      </view>
      <button class="btn-save" type="primary" @tap="updatePrice">保存</button>
    </view>
  </view>
</template>

<script>
  import {
    servicePrice,
    updateServicePrice
  } from '@/utils/api';
  export default {
    data() {
      return {
        price: 0,
        isLogin: false
      }
    },
    computed: {
      inputStyle() {
        let price = this.price + ''
        let w = price.length > 2 ? price.length : 2
        return 'w' + w
        // w = w > 100 ? w : 100
        // console.log(w)
        // return {
        //   width: w
        // }
      }
    },
    onShow() {
      let auth_token = uni.getStorageSync("auth_token");
      if (auth_token) {
        this.isLogin = true;
        this.queryPrice();
      } else {
        this.isLogin = false;
      }
    },
    methods: {
      // 查询咨询费
      async queryPrice() {
        let res = await servicePrice();
        this.price = res.data.price;
      },
      // 修改咨询费
      async updatePrice() {
        const params = {
          price: this.price
        };
        let res = await updateServicePrice(params);
        if (res.status === 0) {
          uni.showToast({
            title: '修改成功！',
            icon: 'none'
          });
        }
      },
      // 跳转到登录页面
      jumpLogin() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
    }
  }
</script>

<style>
  @import url("../../../static/style/no_login.css");

  page {
    height: 100%;
    border-top: 2upx solid #E3E3E3;
    font-weight: 400;
  }

  .page-container {
    height: 100%;
  }

  .cell-column {
    height: 126upx;
    padding: 0 30upx;
    border-bottom: 2upx solid #F4F4F4;
    color: #AD85FC;
    display: flex;
  }

  .uni-input {
    height: 84upx;
    padding: 20upx 0;
    line-height: 84upx;
    font-size: 60upx;
    width: 80upx;
    flex: none;
  }
  .uni-input.w3 {
    width: 110upx;
  }
  .uni-input.w4 {
    width: 140upx;
  }
  .uni-input.w5 {
    width: 170upx;
  }

  .input-placeholder {
    font-size: 36upx;
    color: #AD85FC;
  }

  .suffix {
    height: 84upx;
    padding: 20upx 0;
    font-size: 24upx;
    line-height: 84upx;
  }

  .tips {
    padding: 0 30upx;
    color: #666;
    margin-top: 36upx;
    font-size: 24upx;
  }

  .tip-ul {
    margin: 36upx 0;
  }

  .btn-save[type=primary] {
    margin: 100upx 30upx 0;
    line-height: 88upx;
    border-radius: 0;
    background: #AD85FC;
    font-size: 34upx;
  }

  .btn-save:after {
    display: none;
  }
</style>
